import { DatePicker } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import styles from './datePick.less';
import lodash from 'lodash';

export default (props: any) => {
  const { id, onChange, disabled, value } = props;
  const dateFormat = 'YYYY/MM/DD';
  const [Datevalue, setDatevalue] = useState(null);

  const HandleOnChange = (_: any, dateString: any) => {
    setDatevalue(dateString ? dayjs(dateString, dateFormat) : null);
  };

  useEffect(() => {
    if (typeof value === 'string') setDatevalue(dayjs(value, dateFormat));
  }, [value]);

  useEffect(() => {
    if (!lodash.isEmpty(Datevalue)) {
      console.log('Datevalue', Datevalue);

      onChange && onChange(Datevalue);
    }
  }, [Datevalue]);

  return (
    <DatePicker
      className={styles.datePick}
      id={id}
      onChange={HandleOnChange}
      disabled={disabled}
      value={Datevalue}
      format={dateFormat}
    />
  );
};
